
<!--vue模板-->
<template>
    <div>
      <div>报价信息</div>
      <!--解析自定义字段-->
      <template v-for="f in fields">
        <!--当前自定义字段是下拉列表-->
        <template v-if="f.type == 2">
          <span style="color: #666; font-weight: bold"> {{ f.label }}: </span>
  
          <el-select style="width: 240px" v-model="formData[f.field]">
            <template v-for="o in f.option">
              <el-option :value="o.value" :label="o.label"></el-option>
            </template>
          </el-select>
          <br />
        </template>
        <!--当前自定义字段是单选按钮-->
        <template v-else-if="f.type == 3">
          {{ f.label }}
          <el-radio-group v-model="formData[f.field]">
            <template v-for="o in f.option">
              <el-radio :value="o.value" size="large">{{ o.label }}</el-radio>
            </template> </el-radio-group
          ><br />
        </template>
      </template>
  
      <!--明细-->
      <el-table :data="data.details" style="width: 100%">
        <el-table-column prop="productName" label="产品名称" width="180" />
        <el-table-column label="图号" width="180">
          <template #default="{ row }">
            <el-input v-model="row.picnum" />
          </template>
        </el-table-column>
        <el-table-column prop="num" label="数量" width="180">
          <template #default="{ row }">
            <el-input v-model="row.num" />
          </template>
        </el-table-column>
        <el-table-column label="交期(天)">
          <template #default="{ row }">
            <el-input v-model="row.day" />
          </template>
        </el-table-column>
      </el-table>
  
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </template>
  
  <!--vue 组件选项定义-->
  <script setup>
  import { ref, onBeforeMount } from "vue";
  import { useRoute } from "vue-router";
  import { queryOffer } from "@/api/supplier.js";
  const route = useRoute();
  
  const data = ref({});
  const fields = ref([]);
  
  //要保存的数据
  const formData = ref({
    details: []
  });
  
  //保存
  function save() {
    formData.value.details = data.value.details;
    console.log("save====", formData.value);
  }
  
  //初始数据
  async function init(id) {
    let res = await queryOffer(id);
    if (res.code == 200) {
      data.value = res.data;
      fields.value = JSON.parse(data.value.fields);
      //遍历字段
      fields.value.forEach(el => {
        //获取字段名
        let f = el.field;
        //将f 做为formData的属性，初始值设置为default
        formData.value[f] = el.default;
      });
      console.log("formData>>>", formData.value);
    }
  }
  
  onBeforeMount(() => {
    let id = route.query.id;
    init(id);
  });
  </script>
  
  <!--vue样式 scoped当前样式只适用于当前组件-->
  <style scoped></style>
  